<template>
    <div>
<!--        {{tabsActiveName}}-->
        <el-tabs v-model="tabsActiveName" class="demo-tabs model">
            <el-tab-pane v-for="item in subjectTabs" :label="item.name" :name="String(item.id)">
                <el-collapse v-model="activeNames" @change="handleChange">
                    <el-collapse-item v-for="item in chapter_list"  :title="item.name">
                        <div v-for="children in item.testCenterList">
                            <div class="testCenterList">
                                <div style="margin-left:20px">
<!--                                    {{children}}-->
                                    <div>
                                        <span>{{children.name}}</span>
                                    </div>
                                    <div>
                                        <span style="color: #999999" v-if="children.chapterPractices[0]">上次做题正确率:{{children.chapterPractices[0].correctS ? children.chapterPractices[0].correctS:0}}%</span>
                                    </div>
                                </div>
                                <el-button type="primary" size='small' @click="toChaterExerciese(children.id)">开始做题</el-button>
                            </div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
                <el-row class="model">
                    <div class="ExerciseTab">
                        <el-tabs v-model="activeName" class="demo-tabs">
                            <el-tab-pane label="做题历史" name="default">
                                <div v-if="topicListHistory && topicListHistory.rows && topicListHistory.rows.length">
                                    <div v-for="item in topicListHistory.rows">
                                        <div @click="toChapterHistory(item)" class="ExerciseItem">
                                            <div>
                                                <span class="name">{{item.chapterName}}</span>
                                            </div>
                                            <div class="exam_history">
                                                <span>最后做题时间：{{ proxy.$filters.dateTimeFormat(item.lastTime) }}</span>
                                                <span>做题数量：{{item.didTopicNum}}</span>
                                                <span>题目数量：{{item.totalTopicNum}}</span>
                                                <span style="color: rgba(11, 67, 128, 1);">{{item.state ? '查看记录':'继续做题'}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <el-empty v-else description="description" />
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-row>
                <div v-if="topicListHistory.pagination">
                    <el-pagination
                            background
                            v-model:currentPage="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="topicListHistory.pagination.count"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    />
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import comm_chapter from "../../../hock/composables/comm_chapter";
    import goBackHistory from "../../../utils/hook/goBackHistory";
    import {createdChapter,subjectList,chapterLog,recentTopicList} from "@/api/api";
    import {reactive, toRefs,watch,getCurrentInstance} from "vue";
    import {useRouter} from "vue-router";
    import {allTopic, chapterPointTopic} from "../../../api/api";
    import {ElMessage,ElMessageBox} from "element-plus";

    export default {
        name: "index",
        props:{
            subject_id:{
                type:Number
            },
            subject_name: {
                type: String,
                default:''
            },
            currentItem:{
                type:String
            },
            activeCourse:{
                type:String
            }
        },
        setup(props,{emit}){
            const { proxy } = getCurrentInstance()
            console.log(props.subject_id)
            let router = useRouter();
            let data = reactive({
                pageSize:10,
                currentPage:1,
                subjectName:'',
                tabsActiveName:'',
                subjectTabs:[],
                chapter_list:[],
                activeNames:[],
                activeName:'default',
                allTopicList:[],//章节做题或找回记录数据
                topicListHistory:[],//做题历史
            })

            //科目列表
            let getAllSubjectList = () =>{
                console.log('data.tabsActiveName',data.tabsActiveName)
                let course_id = localStorage.getItem('activeCourse')
                subjectList({courseID:course_id}).then(res =>{
                    console.log('科目列表',res)
                    data.subjectTabs = res.data;
                    data.tabsActiveName = String(res.data[0].id);
                })
            }
            getAllSubjectList();

            //切换章节
            const handleChange = (val) => {
                console.log(val)
            }

            //获取章节列表
            let CreatedChapter = () =>{
                console.log('data.tabsActiveName',data.tabsActiveName);
                createdChapter({subjectID:data.tabsActiveName}).then(res =>{
                    console.log('章节列表',res)
                    data.chapter_list = res.data
                })
            }
            // CreatedChapter();

            //章节做题或找回记录
            // let getAllTopic = () =>{
            //     allTopic({id:Number(data.tabsActiveName)}).then(res =>{
            //         console.log('章节做题或找回记录数据',res)
            //         data.allTopicList = res.data;
            //     })
            // }

            // getAllTopic();

            //最近在学题目列表
            let getRecentTopicList = () =>{
                recentTopicList({courseID:localStorage.getItem('activeCourse'),page:data.currentPage,pageSize:data.pageSize}).then(res =>{
                    console.log('最近在学题目列表',res)
                    data.topicListHistory = res.data
                })
            }
            getRecentTopicList();

            // 章节练习记录详情
            // let getExerciseMessage = () => {
            //     chapterLog({id:959}).then(res =>{
            //         console.log('章节练习记录详情',res)
            //     })
            // }
            // getExerciseMessage();

            //跳转至章节练习并传递参数
            let toChaterExerciese = (id) =>{
                console.log('练习id',id)
                console.log('科目名称',props.subject_name)
                let params = router.currentRoute.value;
                chapterPointTopic({id:id}).then(res =>{
                    goBackHistory.addCurrentPageParams(params,props.currentItem);
                    router.push({name:'ChapterExercise',params:{subject_name:props.subject_name,id:id}})
                }).catch(err =>{
                    ElMessage({
                        type:'error',
                        message:err.message
                    })
                })
            }

            watch(() => data.tabsActiveName,() =>{
                if(data.tabsActiveName){
                    data.subjectName = data.subjectTabs.filter(item => item.id == Number(data.tabsActiveName))[0].name;
                    emit('changeSubjectName',data.subjectName);
                    CreatedChapter();
                    // getAllTopic();
                }
            })

            watch(() => props.activeCourse,() =>{
                getAllSubjectList();
            })

            //跳转至练习记录详情
            let toChapterHistory = (item) =>{
                console.log(item.state)
                if(!item.state){
                    ElMessageBox.confirm(
                        '是否继续上次未完成的试卷？',
                        '温馨提示',
                        {
                            confirmButtonText: '继续作答',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    )
                        .then(() => {
                            let params = router.currentRoute.value;
                            goBackHistory.addCurrentPageParams(params,props.currentItem);
                            router.push({name:'ChapterHistory',params:{id:item.id,state:item.state}})
                        })
                        .catch(() => {

                        })
                }else{
                    let params = router.currentRoute.value;
                    goBackHistory.addCurrentPageParams(params,props.currentItem);
                    router.push({name:'ChapterHistory',params:{id:item.id,state:item.state}})
                }
            }

            const handleSizeChange = (val) => {
                console.log(`${val} items per page`)
                data.pageSize = val;
                getRecentTopicList();
            }
            const handleCurrentChange = (val) => {
                console.log(`current page: ${val}`)
                data.currentPage = val;
                getRecentTopicList();
            }
            return{
                proxy,
                // getAllTopic,
                ...toRefs(data),
                CreatedChapter,
                handleChange,
                toChaterExerciese,
                toChapterHistory,
                handleSizeChange,
                handleCurrentChange
            }
        }
    }
</script>

<style scoped>
    .model{
        margin-bottom: 20px;
    }
    .exam_history :not(:last-child){
        margin-right: 20px;
    }
    .exam_history :not(:first-child){
        font-weight: 400;
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
    }
    .exam_history :first-child{
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
    }
    .ExerciseTab{
        width: 100%;
        margin-bottom: 20px;
    }
    .ExerciseItem .name{
        color: rgba(11, 67, 128, 1);
        font-size: 14px;
        font-weight: 400;
    }
    .ExerciseItem{
        display: flex;
        justify-content: space-between;
        /* height: 55px; */
        align-items: center;
        padding: 5px 20px;
        background-color:  rgba(248, 248, 248, 1);
        margin-bottom: 10px;
        border-radius: 10px;
        cursor: pointer;
    }
    .testCenterList{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
</style>
